<template>
  <div class="app-container">

    <el-card>
      <el-row :gutter="10">
        <el-col :span="9">
          <div style="font-weight: bold ;font-size: 14px;margin:10px 0 10px 0;">
            <span style="width:3px;height:20px;background-color: #2158F3;"> &nbsp</span> &nbsp;车源信息
          </div>
          <el-carousel style="background-color: dimgrey;height: 360px;" trigger="click">
            <el-carousel-item v-for="item in rowData.mainFileList" :key="item" style="height: 360px;">
              <img :src="item.url" style="height: 100%;width: 100%" />
            </el-carousel-item>
          </el-carousel>
        </el-col>
        <el-col :span="9">
          <div style="font-size: 14px;text-align: left; box-sizing: border-box;padding: 20px 40px 10px 40px;">
            <el-row :gutter="10">
              <el-col :span="11">
                <span style="font-weight: bold;font-size: 18px;">{{ rowData.departureCityName }}</span>
                <div style="margin-top: 10px;">
                  出发地：{{ rowData.departureCityName }}/{{ rowData.departureCountryName }}
                </div>
              </el-col>
              <el-col :span="2"><img style="text-align: center; width: 20px;" src="@/assets/icons/svg/right.svg">
              </el-col>
              <el-col :span="11" style="text-align: right;">
                <span style="font-weight: bold;font-size: 18px;">{{ rowData.destinationCityName }}</span>
                <div style="margin-top: 10px;">
                  到达地：{{ rowData.destinationCityName }}/{{ rowData.destinationCountryName }}
                </div>
              </el-col>
            </el-row>
            <table style="font-size: 14px;width: 400px;margin-top: 40px; margin-bottom: 40px; text-align: left;">
              <tbody>
              <tr>
                <td>车牌号</td>
                <td style="font-weight: 600;"> {{ rowData.plateNumber }}</td>
              </tr>
              <tr>
                <td>车型</td>
                <td>
                  {{ carTypeFilter(rowData.vehicleModel) }}
                </td>
              </tr>
              <tr>
                <td>车长</td>
                <td>
                  {{ carLengthFilter(rowData.vehicleLength) }} <span>米</span>
                </td>
              </tr>
              <tr>
                <td style="width:80px; ">载重</td>
                <td>
                  {{ carWeightFilter(rowData.loadWeight) }} <span>吨</span>
                </td>
              </tr>
              <tr>
                <td>排放标准</td>
                <td>
                  {{ emissionStandardFilter(rowData.emissionStandard) }}
                </td>
              </tr>
              <tr>
                <td>发布时间</td>
                <td>
                  {{ rowData.createTime }}
                </td>
              </tr>
              <tr>
                <td>联系人</td>
                <td>
                  {{ rowData.contacts }}
                </td>
              </tr>
              <tr>
                <td>联系电话</td>
                <td>
                  {{ rowData.tel }}
                </td>
              </tr>
              </tbody>
            </table>
            <div style="font-size: 12px;color: #2158F3;margin-bottom: 10px;">备注：提供4.2-17米长各种车辆，为货主找车，为车主找货 </div>
            <el-button type="primary" icon="">咨询</el-button>
          </div>
        </el-col>
        <el-col :span="6">
          <div style="float: right;">{{ rowData.carrierName }}</div>
        </el-col>
      </el-row>
    </el-card>


    <el-card style="margin-top: 20px;">
      <div style="font-weight: bold ;font-size: 14px;margin:10px 0 10px 0;">
        <span style="width:3px;height:20px;background-color: #2158F3;"> &nbsp</span> &nbsp;车主简介
      </div>
      <div style="box-sizing: border-box;padding:20px 40px 20px 40px">
        <div>
          <h2>
            {{ rowData.remark }}
          </h2>
        </div>
        <div v-for="item in rowData.detailFileList">
          <div v-for="img in item.imgInfo">
            <img :src="img.url" style="height: 200px;width: 100%">
          </div>
          {{ item.textVal }}
        </div>
      </div>
    </el-card>




  </div>
</template>
<script setup lang="ts">
import { onActivated, ref } from "vue"
import orderInfo from "@/store/modules/order"
import { carrierPage, custPage, getCarInfo, submitSave, submitPublish, pitchDelete, onShelf, offShelf, statusCount } from '@/api/carList'

const param = ref({
  newStep: 0
})
onActivated(() => {
  console.log('orderInfo')
  const row = orderInfo().rowData
  getSetOrderInfo(row)
})

//获取数据
const rowData = ref({})
const getSetOrderInfo = (row: any) => {
  getCarInfo(row.id).then((res: any) => {
    const result = res.data
    rowData.value = result
    rowData.value.detailFileList = JSON.parse(result.detailFileList)
    // rowData.value.allocation.forEach((el: any) => {
    //   el.operateUsers = operateUserFilter(el.operateUsers)
    // })
    rowData.value.mainFileList = JSON.parse(rowData.value.mainFileList)
    console.log(rowData.value)
  })
}


//过滤 
const carTypeFilter = (val: any) => {
  let result = ''
  const list = [{ value: 5, label: '标准' }, { value: 10, label: '高板' }, { value: 15, label: '平板' }, { value: 20, label: '半挂车' }]
  list.forEach((item: { value: any; label: any; }) => {
    if (item.value == val) {
      result = item.label
    }
  })
  return result
}
const carLengthFilter = (val: any) => {
  let result = ''
  const list = [{ value: 5, label: '6 - 8' }, { value: 10, label: '9 - 10' }, { value: 15, label: '11 - 12' }, { value: 20, label: '13 - 15' }, { value: 25, label: '16 - 17.5' }]
  list.forEach((item: { value: any; label: any; }) => {
    if (item.value == val) {
      result = item.label
    }
  })
  return result
}
const carWeightFilter = (val: any) => {
  let result = ''
  const list = [{ value: 5, label: '3 - 5' }, { value: 10, label: '6 - 10' }, { value: 15, label: '11 - 15' }, { value: 20, label: '16 - 20' }, { value: 25, label: '21 - 25' }, { value: 30, label: '26 - 30' }, { value: 35, label: '31 - 35' }]
  list.forEach((item: { value: any; label: any; }) => {
    if (item.value == val) {
      result = item.label
    }
  })
  return result
}
//5 - 国IV 10 - 国V 15 - 国VI
const emissionStandardFilter = (val: any) => {
  let result = ''
  const list = [{ value: 5, label: '国IV' }, { value: 10, label: '国V' }, { value: 15, label: '国VI' }]
  list.forEach((item: { value: any; label: any; }) => {
    if (item.value == val) {
      result = item.label
    }
  })
  return result
}
</script>
<style lang="scss" scoped></style>